<template>
  <div class="autInfo">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="autInfo.name"
      left-arrow
      @click-left="$router.back()"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <!-- 作者信息 -->
    <van-cell class="cell1">
      <!-- 头像 -->
      <van-image :src="autInfo.photo" fit="cover" slot="title" round />
      <!-- 用户关注等信息s -->
      <div slot="title" class="infoAut">
        <van-grid :border="false">
          <van-grid-item>
            <div class="number">{{ autInfo.art_count }}</div>
            <div class="text">发布</div>
          </van-grid-item>
          <van-grid-item>
            <div class="number">{{ autInfo.follow_count }}</div>
            <div class="text">关注</div>
          </van-grid-item>
          <van-grid-item>
            <div class="number">{{ autInfo.fans_count }}</div>
            <div class="text">粉丝</div>
          </van-grid-item>
          <van-grid-item>
            <div class="number">{{ autInfo.like_count }}</div>
            <div class="text">获赞</div>
          </van-grid-item>
        </van-grid>
        <!-- 关注按钮 -->
        <btn-following
          :f2="'f2'"
          :is_followed="autInfo.is_following ? autInfo.is_following : false"
          :aut_id="id"
        ></btn-following>
      </div>
    </van-cell>
    <van-cell class="cell2">
      <p><span class="p-item">认证：</span>{{ autInfo.certi }}</p>
      <p><span class="p-item">简介：</span>{{ autInfo.intro }}</p>
    </van-cell>

    <articl-cell :Newslist="autArt"></articl-cell>
  </div>
</template>

<script>
// 根据id查询作者详细信息
import { getAutById, getAutArt } from '@/assets/api/aut'
// 关注按钮组件
import btnFollowing from '@/components/btn-following'
// 文章详细组件
import articlCell from '@/components/article-cell'
export default {
  name: 'autInfo',
  props: {
    id: {
      typeof: [Number, String],
      required: true
    }
  },
  data() {
    return {
      autInfo: {},
      autArt: []
    }
  },
  methods: {
    onClickRight() {},
    async getAutInfo() {
      try {
        var { data: res } = await getAutById(this.id)
        var { data: res1 } = await getAutArt(this.id)
      } catch {
        return this.$toast('获取用户信息失败请稍后在试')
      }
      this.autInfo = res.data
      this.autArt = res1.data.results
    }
  },
  mounted() {
    this.getAutInfo()
  },
  components: {
    btnFollowing,
    articlCell
  }
}
</script>

<style lang="less" scoped>
.autInfo {
  background-color: #f7f7f7;
  height: 100vh;
  .van-cell {
    margin-bottom: 12px;
  }
  /deep/.van-nav-bar {
    .van-nav-bar__text {
      color: #fff;
    }
    .van-nav-bar__left {
      .van-icon {
        font-size: 37px;
      }
    }
    .van-nav-bar__right {
      .van-icon {
        font-size: 47px;
      }
    }
  }
  .cell1 {
    height: 240px;
  }
  /deep/ .van-cell {
    .van-image {
      width: 156px;
      height: 156px;
      float: left;
    }
    .infoAut {
      display: flex;
      flex-direction: column;
      .van-grid-item__content {
        padding: 0;
        .number {
          font-size: 28px;
          color: #000;
          flex: 1;
          letter-spacing: 2px;
        }
        .text {
          font-size: 20px;
          color: #9c9b9d;
          flex: 2;
          transform: translateY(-16px);
        }
      }
      .following-box {
        position: absolute;
        top: 100px;
        left: 300px;
      }
    }
  }
  /deep/ .cell2 {
    p {
      padding: 0;
      margin: 0;
      font-size: 26px;
      color: #000;
      .p-item {
        font-size: 26px;
        color: #969493;
      }
    }
  }
}
</style>
